<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='https://code.jquery.com/jquery-1.12.4.js'></script>
</head>
<style type="text/css">
    .mar{
        margin-bottom: 30px;
        overflow: hidden;
    }
    *{padding: 0;margin: 0;font-size: 11px;box-sizing:border-box}
    li{
        list-style: none;
    }
    .main{
        width: 502px;
        height: 335px;
        border: 1px solid #EBEBEB;
        overflow: hidden;
        float: left;
    }
    h2{
        height: 335px;
        width: 90px;
        font-size: 22px;
        float: left;
        line-height: 335px;
    }
    .main ul{
        float: left;
        position: relative;
    }
    .main ul.num{
        width: 40px;
    }
    .main ul.num li{
        border-right: 1px solid #EBEBEB;
    }
    .main ul.buy{
        width: 230px;
        border-right: 1px solid #EBEBEB;
    }
    .main ul.sell{
        width: 230px;
    }
    .main ul.buy li h6{
        right: 0;
        height: 16px;
        position: absolute;
        z-index: 0;
        background:rgba(231,86,0,0.6);
    }
    .main ul.sell li h6{
        height: 16px;
        position: absolute;
        z-index: 0;
        background:rgba(227,241,40,1);
    }
    .main ul.buy li p,ul.sell li p{
        width: 33%;
        float: left;
        text-align: center;
        position: relative;
        z-index: 6;
    }
    .main ul li{
        border-bottom: 1px solid #EBEBEB;
        overflow: hidden;
        height: 16px;
        text-align: center;
    }
    .history{
        width: 670px;
        height: 335px;
        float: left;
    }
    .history ul{
        border: 1px solid #EBEBEB;
        overflow: hidden;
    }
    .history ul li{
        overflow: hidden;
        /*border: 1px solid red;*/
        height: 10px;
    }
    .history ul li p{
        width: 20%;
        float: left;
        text-align: center;
    }
    .history ul li p,.history ul li p span{
        font-size: 8px;
    }
    .history ul li p .sell{
        color: #82AB2F;
    }
    .history ul li p .buy{
        color: #E55600;
    }
</style>
<body>

<!-- html模板 -->
<!-- <div id="ans" class="mar">
    <h2>小蚁币</h2>
    <div class="main">
        <ul class="num">
            <li></li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
        <ul class="buy">
            <li><p>折合(￥)</p><p>买入量</p><p>买入价(￥)</p></li>
            <li><h6 style="width: 10%;"></h6><p>242</p><p>1</p><p>1.2</p></li>
        </ul>
        <ul class="sell">
            <li><p>折合(￥)</p><p>卖入量</p><p>卖出价(￥)</p></li>
            <li><h6 style="width: 10%;"></h6><p>242</p><p>1</p><p>1.2</p></li>
        </ul>
    </div>
    <div class="history">
        <ul>
            <li><p>成交时间</p><p>买/卖</p><p>成交价</p><p>成交量</p><p>总金额</p></li>
        </ul>
    </div>
</div> -->




<!-- 蚂蚁股 -->
<div id="ans" class="mar">
    <h2>小蚁币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 无限币 -->
<div id="ifc" class="mar">
    <h2>无限币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 狗币 -->
<div id="doge" class="mar">
    <h2>狗币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 以太经典 -->
<div id="etc" class="mar">
    <h2>以太经典</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>


<!-- 点点币 -->
<div id="ppc" class="mar">
    <h2>点点币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 雪山古树 -->
<div id="xsgs" class="mar">
    <h2>雪山古树</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 绿币 -->
<div id="vtc" class="mar">
    <h2>绿币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 红贝壳 -->
<div id="rss" class="mar">
    <h2>红贝壳</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 里约币 -->
<div id="rio" class="mar">
    <h2>里约币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 阿希币 -->
<div id="xas" class="mar">
    <h2>阿希币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- LISK -->
<div id="lsk" class="mar">
    <h2>LISK</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 冰河 -->
<div id="fz" class="mar">
    <h2>冰河</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 传送 -->
<div id="tfc" class="mar">
    <h2>传送</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 质数币 -->
<div id="xpm" class="mar">
    <h2>质数币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 瑞波币 -->
<div id="xrp" class="mar">
    <h2>瑞波币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 世界币 -->
<div id="wdc" class="mar">
    <h2>世界币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 普银 -->
<div id="peb" class="mar">
    <h2>普银</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 维理币 -->
<div id="vrc" class="mar">
    <h2>维理币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 最大币 -->
<div id="max" class="mar">
    <h2>最大币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 乐园通 -->
<div id="pgc" class="mar">
    <h2>乐园通</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 未来币 -->
<div id="nxt" class="mar">
    <h2>未来币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 美人鱼币 -->
<div id="mryc" class="mar">
    <h2>美人鱼币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 黑币 -->
<div id="blk" class="mar">
    <h2>黑币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 谷壳币 -->
<div id="gooc" class="mar">
    <h2>谷壳币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 泽塔币 -->
<div id="zet" class="mar">
    <h2>泽塔币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 企鹅链 -->
<div id="qec" class="mar">
    <h2>企鹅链</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 猴宝币 -->
<div id="mtc" class="mar">
    <h2>猴宝币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 一号币 -->
<div id="ytc" class="mar">
    <h2>一号币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 保罗币 -->
<div id="plc" class="mar">
    <h2>保罗币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 招财币 -->
<div id="zcc" class="mar">
    <h2>招财币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 美通币 -->
<div id="met" class="mar">
    <h2>美通币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 活力币 -->
<div id="hlb" class="mar">
    <h2>活力币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 比特股 -->
<div id="bts" class="mar">
    <h2>比特股</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 聚宝币 -->
<div id="jbc" class="mar">
    <h2>聚宝币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 暗网币 -->
<div id="dnc" class="mar">
    <h2>暗网币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 地球币 -->
<div id="eac" class="mar">
    <h2>地球币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 肯特币 -->
<div id="ktc" class="mar">
    <h2>肯特币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 以太坊 -->
<div id="eth" class="mar">
    <h2>以太坊</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 游戏点 -->
<div id="game" class="mar">
    <h2>游戏点</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 幸运币 -->
<div id="lkc" class="mar">
    <h2>幸运币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 鲨之信 -->
<div id="skt" class="mar">
    <h2>鲨之信</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 比特币 -->
<div id="btc" class="mar">
    <h2>比特币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>

<!-- 莱特币 -->
<div id="ltc" class="mar">
    <h2>莱特币</h2>
    <div class="main"></div>
    <div class="history"></div>
</div>



</body>






<script type="text/javascript">

    $(function(){
        //小蚁币
        $.get('./function.php?bi=ans',function(data){
            var str_code = create_dom(data,'#ans');
        },'json');

        //无限币
        $.get('./function.php?bi=ifc',function(data){
            var str_code = create_dom(data,'#ifc');
        },'json');

        //狗币
        $.get('./function.php?bi=doge',function(data){
            var str_code = create_dom(data,'#doge');
        },'json');

        //以太经典
        $.get('./function.php?bi=etc',function(data){
            var str_code = create_dom(data,'#etc');
        },'json');

        //点点币
        $.get('./function.php?bi=ppc',function(data){
            var str_code = create_dom(data,'#ppc');
        },'json');

        //雪山古树
        $.get('./function.php?bi=xsgs',function(data){
            var str_code = create_dom(data,'#xsgs');
        },'json');

        //绿币
        $.get('./function.php?bi=vtc',function(data){
            var str_code = create_dom(data,'#vtc');
        },'json');

        //红贝壳
        $.get('./function.php?bi=rss',function(data){
            var str_code = create_dom(data,'#rss');
        },'json');

        //里约币
        $.get('./function.php?bi=rio',function(data){
            var str_code = create_dom(data,'#rio');
        },'json');

        //阿希币
        $.get('./function.php?bi=xas',function(data){
            var str_code = create_dom(data,'#xas');
        },'json');

        //lisk
        $.get('./function.php?bi=lsk',function(data){
            var str_code = create_dom(data,'#lsk');
        },'json');

        //冰河币
        $.get('./function.php?bi=fz',function(data){
            var str_code = create_dom(data,'#fz');
        },'json');

        //传送
        $.get('./function.php?bi=tfc',function(data){
            var str_code = create_dom(data,'#tfc');
        },'json');

        //质数币
        $.get('./function.php?bi=xpm',function(data){
            var str_code = create_dom(data,'#xpm');
        },'json');

        //瑞波币
        $.get('./function.php?bi=xrp',function(data){
            var str_code = create_dom(data,'#xrp');
        },'json');

        //世界币
        $.get('./function.php?bi=wdc',function(data){
            var str_code = create_dom(data,'#wdc');
        },'json');

        //普银
        $.get('./function.php?bi=peb',function(data){
            var str_code = create_dom(data,'#peb');
        },'json');

        //维理币
        $.get('./function.php?bi=vrc',function(data){
            var str_code = create_dom(data,'#vrc');
        },'json');

        //最大币
        $.get('./function.php?bi=max',function(data){
            var str_code = create_dom(data,'#max');
        },'json');

        //乐园通
        $.get('./function.php?bi=pgc',function(data){
            var str_code = create_dom(data,'#pgc');
        },'json');

        //未来币
        $.get('./function.php?bi=nxt',function(data){
            var str_code = create_dom(data,'#nxt');
        },'json');

        //美人鱼币
        $.get('./function.php?bi=mryc',function(data){
            var str_code = create_dom(data,'#mryc');
        },'json');

        //黑币
        $.get('./function.php?bi=blk',function(data){
            var str_code = create_dom(data,'#blk');
        },'json');

        //谷壳币
        $.get('./function.php?bi=gooc',function(data){
            var str_code = create_dom(data,'#gooc');
        },'json');

        //泽塔币
        $.get('./function.php?bi=zet',function(data){
            var str_code = create_dom(data,'#zet');
        },'json');

        //企鹅链
        $.get('./function.php?bi=qec',function(data){
            var str_code = create_dom(data,'#qec');
        },'json');

        //猴宝币
        $.get('./function.php?bi=mtc',function(data){
            var str_code = create_dom(data,'#mtc');
        },'json');

        //一号币
        $.get('./function.php?bi=ytc',function(data){
            var str_code = create_dom(data,'#ytc');
        },'json');

        //保罗币
        $.get('./function.php?bi=plc',function(data){
            var str_code = create_dom(data,'#plc');
        },'json');

        //招财币
        $.get('./function.php?bi=zcc',function(data){
            var str_code = create_dom(data,'#zcc');
        },'json');

        //美通币
        $.get('./function.php?bi=met',function(data){
            var str_code = create_dom(data,'#met');
        },'json');

        //活力币
        $.get('./function.php?bi=hlb',function(data){
            var str_code = create_dom(data,'#hlb');
        },'json');

        //比特股
        $.get('./function.php?bi=bts',function(data){
            var str_code = create_dom(data,'#bts');
        },'json');

        //聚宝币
        $.get('./function.php?bi=jbc',function(data){
            var str_code = create_dom(data,'#jbc');
        },'json');

        //暗网币
        $.get('./function.php?bi=dnc',function(data){
            var str_code = create_dom(data,'#dnc');
        },'json');

        //地球币
        $.get('./function.php?bi=eac',function(data){
            var str_code = create_dom(data,'#eac');
        },'json');

        //肯特币
        $.get('./function.php?bi=ktc',function(data){
            var str_code = create_dom(data,'#ktc');
        },'json');

        //以太坊
        $.get('./function.php?bi=eth',function(data){
            var str_code = create_dom(data,'#eth');
        },'json');

        //游戏点
        $.get('./function.php?bi=game',function(data){
            var str_code = create_dom(data,'#game');
        },'json');

        //幸运币
        $.get('./function.php?bi=lkc',function(data){
            var str_code = create_dom(data,'#lkc');
        },'json');

        //鲨之信
        $.get('./function.php?bi=skt',function(data){
            var str_code = create_dom(data,'#skt');
        },'json');

        //比特币
        $.get('./function.php?bi=btc',function(data){
            var str_code = create_dom(data,'#btc');
        },'json');

        //莱特币
        $.get('./function.php?bi=ltc',function(data){
            var str_code = create_dom(data,'#ltc');
        },'json');
























        function create_dom(arr,$dom){
            //生成买卖单
            var str_code = '<ul class="num"><li></li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul>\
                <ul class="buy">\
                    <li><p>折合(￥)</p><p>买入量</p><p>买入价(￥)</p></li>';
            $.each(arr.buy,function(k, v) {
                str_code += '<li><h6 style="width: '+(v[1]/arr.max_num*100)+'%;"></h6><p>'+v.sum+'</p><p>'+v[1]+'</p><p>'+v[0]+'</p></li>';
            });
            str_code += '</ul><ul class="sell">\
                    <li><p>折合(￥)</p><p>卖入量</p><p>卖出价(￥)</p></li>';
            $.each(arr.sell,function(k, v) {
                str_code += '<li><h6 style="width: '+(v[1]/arr.max_num*100)+'%;"></h6><p>'+v[0]+'</p><p>'+v[1]+'</p><p>'+v.sum+'</p></li>';
            });
            str_code += '</ul>';
            $($dom+' .main').append(str_code);
            //生成成交记录
            var str = '<ul><li><p>成交时间</p><p>买/卖</p><p>成交价</p><p>成交量</p><p>总金额(￥)</p></li>';

            $.each(arr.history,function(k,v) {
                var buy_sell = v[3]=='buy' ? '<span class="buy">买入</span>' : '<span class="sell">卖出</span>';
                str += '<li><p>'+v[0]+'</p><p>'+buy_sell+'</p><p>'+v[1]+'</p><p>'+v[2]+'</p><p>'+v['sum']+'</p></li>';
            });
            str += '</ul>';
            $($dom+' .history').append(str);
            // return str_code;
        }
















    })




    </script>
</html>